<!-- 头部汇总 -->
<!--<apes-content>-->
  <apes-button-list class="buttonList" [ctx]="ctx" [buttonBarMetadata]="buttonBar"
                    (click)="onEvent($event)"></apes-button-list>

  <apes-card>
    <div>
      <table class="box-tab">
        <thead>
        <tr *ngFor="let body of headData">
          <td class="box-the"></td>
          <td class="box-the" *ngFor="let head of body.headData">{{ head.headerName }}</td>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let body of headData">
          <td class="box-tdl">日</td>
          <td class="box-tdl" *ngFor="let head of body.headData">{{ headList[head['field']] }}</td>
        </tr>
        <tr *ngFor="let body of headData">
          <td class="box-tdl">月</td>
          <td class="box-tdl" *ngFor="let head of body.headData">{{ headYUEList[head['field']] }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </apes-card>

  <!-- 保险转化 -->
  <apes-card>
    <div>
      <table class="box-tab" style="width: 55%">
        <thead>
        <tr *ngFor="let body of bxData">
          <td class="box-the" *ngFor="let head of body.bxData">{{ head.headerName }}</td>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let body of bxData">
          <td class="box-tdl" *ngFor="let head of body.bxData">{{ bxListRI[head['field']] }}</td>
        </tr>
        <tr *ngFor="let body of bxData">
          <td class="box-tdl" *ngFor="let head of body.bxData">{{ bxListYUE[head['field']] }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </apes-card>

  <!-- 保养年卡转化 -->
  <apes-card>
    <div>
      <table class="box-tab" style="width: 100%">
        <thead>
        <tr>
          <th class="box-th" colspan="2"></th>
          <th class="box-th" colspan="3">新用户转化</th>
          <th class="box-th" colspan="3">原有非保养年卡车辆</th>
          <th class="box-th" colspan="2">保养年卡车辆</th>
          <th class="box-th"></th>
        </tr>
        <tr *ngFor="let body of vipList">
          <td class="box-the" *ngFor="let head of body.vipData">{{ head.headerName }}</td>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let body of vipList">
          <td class="box-tdl" *ngFor="let head of body.vipData">{{ vipListRI[head['field']] }}</td>
        </tr>
        <tr *ngFor="let body of vipList">
          <td class="box-tdl" *ngFor="let head of body.vipData">{{ vipListYUE[head['field']] }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </apes-card>

  <!-- 年卡统计 -->
  <apes-card>
    <div>
      <table class="box-tab" style="width: 60%">
        <thead>
        <tr *ngFor="let body of nkData">
          <td class="box-the" *ngFor="let body of body.nkData">{{ body.headerName }}</td>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let body of nkData">
          <td class="box-tdl" *ngFor="let head of body.nkData">{{ nkListRI[head['field']] }}</td>
        </tr>
        <tr *ngFor="let body of nkData">
          <td class="box-tdl" *ngFor="let head of body.nkData">{{ nkListYUE[head['field']] }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </apes-card>

  <div style="display: flex; flex-wrap: wrap">
    <apes-card style="width: 50%; " *ngFor="let data of reportList">
      <h3>{{ data.title }}</h3>
      <ag-grid-angular #grid
                       style="width: 100%;" [ngStyle]="{ height: height }" class="ag-theme-balham"
                       enableColResize="true"
                       enableSorting="true"
                       enableFilter="true"

                       suppressLoadingOverlay="true"

                       [rowData]="data.rowData"
                       [gridOptions]="gridOptions"
                       [columnDefs]="data.titleList"
                       [pinnedBottomRowData]="pinnedBottomRowData"
                       [getContextMenuItems]="getContextMenuItems">
      </ag-grid-angular>
    </apes-card>
  </div>
<!--</apes-content>-->
